<template>
	<view class="content">
		<view class="content-left">
			<text class="content-left-label">已选:</text>
			<text class="content-left-count">{{ data.length }}个菜品</text>
		</view>
		<view class="content-right">
			<view class="right-btn right-btn_check" @tap="onCheckCart">查看</view>
			<view class="right-btn right-btn_confirm" @tap="onConfirm">确定</view>
		</view>
	</view>

	<!-- 弹窗-购物车详情 -->
	<wd-floating-panel
		class="floating-panel"
		v-model:height="height"
		:anchors="[0, 500]"
		@heightChange="handleHeightChange"
	>
		<view class="floating-panel-content">
			<view class="floating-panel-body hide-scroller-bar">
				<CartItem
					v-for="item in data"
					:key="item.id"
					:data="item"
					@delete="onDelete"
				></CartItem>
			</view>
			<view class="floating-panel-foot">
				<wd-button block @tap="onHideFloatingPanel">确定</wd-button>
			</view>
		</view>
	</wd-floating-panel>
</template>

<script setup>
import { ref, toRaw } from 'vue';

import CartItem from './CartItem.vue';

const $emits = defineEmits(['delete', 'confirm']);
const $props = defineProps({
	data: { type: Array, default: () => [] },
});

const height = ref(0);

const onCheckCart = () => {
	height.value = 500;
};

const onDelete = (data) => {
	$emits('delete', toRaw(data));
};

const onConfirm = () => {
	$emits('confirm');
};

const handleHeightChange = () => {};
const onHideFloatingPanel = () => {
	height.value = 0;
};
</script>

<style scoped>
.content {
	height: 98rpx;
	border-top: 2rpx solid #eaeaea;

	display: flex;
	align-items: center;
}

.content-left {
	padding-left: 32rpx;
	flex: 1;

	font-size: 14px;
}

.content-right {
	display: flex;
}

.content-left-count {
	font-weight: bold;
	color: #35ad1a;
}

.right-btn {
	width: 160rpx;
	height: 98rpx;
	display: flex;
	justify-content: center;
	align-items: center;

	color: white;
}

.content-left-label {
	margin-right: 8rpx;
}
.right-btn_check {
	background-color: #0581fe;
}

.right-btn_confirm {
	background-color: #35ad1a;
}

.floating-panel {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.floating-panel-content {
	padding: 0 32rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.floating-panel-body {
	height: calc(500px - 30px - 40px);
	overflow: auto;
}

.floating-panel-foot {
	height: 30px;
}
</style>
